<template>
	<popup direction="bottom" v-model="show">
		<view class="playMore flex" :style="{ '--fss': app.theme.fss() }">
			<view class="transverse-line flex">
				<view class="transverse-line-view"></view>
			</view>
			<view class="musicInfo flex">
				<view class="left flex">
					<image class="image" mode="aspectFill" src="/static/img/test/test.png"></image>
					<view class="info">
						<view class="h3 ell">美妙的同志之歌</view>
						<view class="desc ell">思维羊水</view>
					</view>
				</view>
				<view class="right flex">
					<text class="iconfont icon-shunxu"></text>
					<!--text class="iconfont icon-suijibofang"></text>
					<text class="iconfont icon-danquxunhuan"></text-->
					<text class="text">顺序</text>
				</view>
			</view>
			<view class="fourView flex">
				<view class="item flex">
					<view class="iconView flex">
						<text class="iconfont icon-tianjiawenjianjia" style="font-size: calc(36rpx * var(--fss));"></text>
					</view>
					<view class="text">播放置顶</view>
				</view>
				<view class="item flex">
					<view class="iconView flex">
						<text class="iconfont icon-fuzhi" style="font-size: calc(36rpx * var(--fss));"></text>
					</view>
					<view class="text">复制歌词</view>
				</view>
				<view class="item flex">
					<view class="iconView flex">
						<text class="iconfont icon-yinle_2" style="font-size: calc(40rpx * var(--fss));"></text>
					</view>
					<view class="text">做同款</view>
				</view>
				<view class="item flex">
					<view class="iconView flex">
						<text class="iconfont icon-jubao" style="font-size: calc(38rpx * var(--fss));"></text>
					</view>
					<view class="text">举报该歌</view>
				</view>
			</view>
			<view class="block_more flex">
				<view class="item flex">
					<view class="ell text">音量</view>
					<view class="progress_bar flex">
						<view class="text">0</view>
						<slider
							class="slider" 
							activeColor="#00ffbb"
							backgroundColor="rgba(255,255,255,0.15)" 
							:value="80"
							:block-size="15" 
							:step="1" 
							:min="0" 
							:max="100"
						/>
						<view class="text">100</view>
					</view>
				</view>
				<view class="item flex">
					<view class="ell text">作者<text style="color: rgba(255,255,255,0.6);margin-left: 40rpx;font-size: calc(23rpx * var(--fss));">思维羊水</text></view>
					<view class="right iconfont icon-right-1-copy"></view>
				</view>
				<view class="item flex">
					<view class="ell text">倍速<text style="color: rgba(255,255,255,0.6);margin-left: 40rpx;font-size: calc(23rpx * var(--fss));">1.0</text></view>
					<view class="right iconfont icon-right-1-copy"></view>
				</view>
				<view class="item flex">
					<view class="ell text">重命名</view>
					<view class="right iconfont icon-right-1-copy"></view>
				</view>
				<view class="item flex">
					<view class="ell text" style="color: #ff4f23">删除</view>
					<view class="right iconfont icon-right-1-copy" style="color: #ff4f23"></view>
				</view>
			</view>
			<footer-bar></footer-bar>
		</view>
	</popup>
</template>

<script setup>
	import { ref, inject, defineProps, defineExpose } from "vue";
	const app = inject('app');
	
	/* 变量区域 */
	// 显示状态
	const show = ref(false);
	
	
	/* 方法区域 */
	// 打开弹窗
	function open() {
		show.value = true;
	}
	
	// 关闭弹窗
	function close() {
		show.value = false;
	}
	
	
	// 将方法抛出给父级组件使用
	defineExpose({ open, close });
</script>

<style scoped lang="scss">
	.transverse-line {
		.transverse-line-view{
			background: rgba(255,255,255,0.1);
		}
	}
	.playMore{
		border-radius: 15rpx 15rpx 0 0;
		overflow: hidden;
		flex-direction: column;
		width: 100vw;
		padding-bottom: $padding;
		background: linear-gradient(#232526, #202122);
		background: rgba(0,0,0,0.3);
		backdrop-filter: blur(30rpx);
		.musicInfo{
			padding: 0 $padding;
			flex-direction: row;
			align-items: center;
			.left{
				flex-direction: row;
				align-items: center;
				flex: 1;
				width: 0;
				.image{
					width: 100rpx;
					height: 100rpx;
					border-radius: 15rpx;
				}
				.info{
					flex: 1;
					width: 0;
					margin: 0 25rpx;
					.h3{
						font-size: calc(28rpx * var(--fss));
						line-height: 1.2;
						color: rgba(255,255,255,1);
						font-weight: bold;
					}
					.desc{
						font-size: calc(24rpx * var(--fss));
						line-height: 1.2;
						margin-top: 10rpx;
						color: rgba(255,255,255,0.6);
					}
				}
			}
			.right{
				line-height: 55rpx;
				color: rgba(255,255,255,0.6);
				border: 2rpx solid rgba(255,255,255,0.3);
				flex-direction: row;
				align-items: center;
				padding: 0 26rpx;
				border-radius: 100rpx;
				transition: 0.2s all;
				&:active{
					opacity: 0.8;
				}
				.iconfont{
					font-size: calc(24rpx * var(--fss));
				}
				.text{
					font-size: calc(25rpx * var(--fss));
					margin-left: 12rpx;
				}
			}
		}
		.fourView{
			flex-direction: row;
			align-items: center;
			padding: 0 20rpx;
			margin-top: 42rpx;
			.item{
				flex-direction: column;
				align-items: center;
				justify-content: center;
				flex: 1;
				width: 0;
				transition: 0.2s all;
				&:active{
					opacity: 0.8;
				}
				.iconView{
					width: 100rpx;
					height: 100rpx;
					background: rgba(255,255,255,0.08);
					border-radius: 50%;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					.iconfont{
						color: rgba(255,255,255,1);
					}
				}
				.text{
					color: rgba(255,255,255,0.7);
					font-size: calc(22rpx * var(--fss));
					line-height: 1.2;
					margin-top: 15rpx;
				}
			}
		}
		.block_more {
			margin: 33rpx $padding 0 $padding;
			flex-direction: column;
			border-radius: 10rpx;
			overflow: hidden;
			background: rgba(255,255,255,0.04);
			.item {
				width: 100%;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				line-height: 96rpx;
				padding: 0 28rpx 0 36rpx;
				position: relative;
				transition: 0.2s all;
				&:active {
					opacity: 0.8;
				}
				&:after {
					content: "";
					position: absolute;
					bottom: 0;
					left: 40rpx;
					right: 40rpx;
					height: 2rpx;
					background: rgba(255,255,255,0.01)
				}
				&:nth-last-child(1) {
					&:after {
						display: none;
					}
				}
				.text {
					font-size: calc(27rpx * var(--fss));
					color: rgba(255,255,255,0.8);
				}
				.right{
					text-align: right;
					flex: 1;
					width: 0;
					margin-left: 22rpx;
					color: rgba(255,255,255,0.4);
					font-size: calc(22rpx * var(--fss));
				}
				.progress_bar{
					margin-left: 22rpx;
					flex-direction: row;
					align-items: center;
					justify-content: flex-end;
					width: 250rpx;
					.text {
						width: 40rpx;
						text-align: center;
						font-size: calc(22rpx * var(--fss, 1));
						color: rgba(255,255,255,0.55);
					}
					.slider {
						flex: 1;
						width: 0;
						margin: 0 15rpx;
						:deep(.uni-slider-handle-wrapper) {
							height: 6rpx;
						}
						:deep(.uni-slider-thumb) {}
						:deep(.uni-slider-track) {
							max-width: 100%;
						}
						:deep(.uni-slider-handle){
							transform: scale(0.6);
						}
						:deep(.uni-slider-thumb){
							transform: scale(0.6);
						}
					}
				}
			}
		}
	}
</style>